<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>我的</p>
    </header>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <img src="path/to/avatar.jpg" alt="头像" class="avatar" />
      <div class="user-details">
        <div class="username">
          <p>{{ user.userName }}</p>
        </div>
        <div class="user-level">会员等级：普通会员</div>
      </div>
    </div>

    <!-- 历史订单卡片 -->
    <div class="order-card" @click="goToOrderList">
      <div class="order-title">历史订单</div>
      <div class="summary-card">
        <div class="summary-item">
          <div class="label">待付款</div>
          <div class="value">0</div>
        </div>
        <div class="summary-item">
          <div class="label">待发货</div>
          <div class="value">0</div>
        </div>
        <div class="summary-item">
          <div class="label">待收货</div>
          <div class="value">0</div>
        </div>
        <div class="summary-item">
          <div class="label">已完成</div>
          <div class="value">0</div>
        </div>
      </div>
    </div>

    <!-- 功能菜单卡片 -->
    <div class="menu-card">
      <a class="menu-item" @click.prevent="goToUserAddress">地址管理</a>
      <a class="menu-item" @click.prevent="goToFavorites">我的收藏</a>
      <a class="menu-item" @click.prevent="goToSettings">设置</a>
      <!-- 新增的退出账号按钮 -->
      <a class="menu-item" @click.prevent="logout">退出账号</a>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Footer from '../components/Footer.vue';

const router = useRouter();
const user = ref({});

onMounted(() => {
  user.value = JSON.parse(sessionStorage.getItem('user'));
});

const goToUserAddress = () => {
  router.push('/userAddress');
};

const goToOrderList = () => {
  router.push('/orderList');
};

const goToFavorites = () => {
  router.push('/favorites');
};

const goToSettings = () => {
  router.push('/settings');
};

const logout = () => {
  alert('已退出');
  // 清除本地存储的用户信息
  localStorage.removeItem('user');
  // 跳转到登录页面
  router.push('/login');
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(to bottom, #ffffff, #f2faff);
}
header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-card {
  background-color: #fff;
  padding: 2vw;
  margin: 12vw 2vw 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}
.avatar {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right: 2vw;
}
.user-details {
  flex-grow: 1;
}
.username {
  font-size: 4.8vw;
  font-weight: bold;
  color: #333;
}
.user-level {
  font-size: 3.6vw;
  color: #888;
}
.order-card {
  background-color: #fff;
  padding: 2vw;
  margin: 2vw;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.order-title {
  font-size: 4.8vw;
  font-weight: bold;
  color: #333;
  margin-bottom: 1vw;
}
.summary-card {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2vw;
}
.summary-item {
  width: 23%;
  text-align: center;
  margin-bottom: 2vw;
}
.label {
  font-size: 4vw;
  color: #666;
}
.value {
  font-size: 4vw;
  color: #0097ff;
  font-weight: bold;
}
.menu-card {
  background-color: #fff;
  padding: 2vw;
  margin: 2vw;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.menu-item {
  display: block;
  padding: 3vw;
  margin: 2vw 0;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  background-color: #f2f2f2;
}
.menu-item:hover {
  background-color: #e1e1e1;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}
</style>
